<template>
	<el-card shadow="hover" v-loading="isLoading">
		<el-header>
			<div class="left-panel">
				<h2>订单基本信息</h2>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-button type="primary" @click="goBack">返回</el-button>
				</div>
			</div>
		</el-header>
		<el-main>
			<el-row>
				<el-col :span="4">
					<el-form-item label="订单编号：" prop="company_order_sn">
						<el-text class="mx-1" clearable>{{ info.company_order_sn }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="3" :offset="1">
					<el-form-item label="订单状态：" prop="order_status_name">
						<el-text class="mx-1" clearable>{{ info.order_status_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="4" :offset="1">
					<el-form-item label="创建时间：" prop="created_at">
						<el-text class="mx-1" clearable>{{ info.created_at }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="3" :offset="1">
					<el-form-item label="采购金额：" prop="order_amount">
						<el-text class="mx-1" clearable>￥{{ info.order_amount }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<el-form-item label="服务卡名称：" prop="card_name">
						<el-text class="mx-1" clearable>{{ info.card_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="3" :offset="1">
					<el-form-item label="商品内容：" prop="">
						<el-text class="mx-1" clearable>{{ info.card_product_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="4" :offset="1">
					<el-form-item label="下单企业：" prop="company_name">
						<el-text class="mx-1" clearable>{{ info.company_name }}</el-text>
					</el-form-item>
				</el-col>
				<el-col :span="4" :offset="1">
					<el-form-item label="支付金额：" prop="pay_amount">
						<el-text class="mx-1" clearable>￥{{ info.pay_amount }}{{ info.pay_type ?? info.pay_type }}</el-text>
					</el-form-item>
				</el-col>
			</el-row>
		</el-main>
	</el-card>
	<el-card shadow="hover" v-loading="isLoading">
		<h2>订单详情</h2>
		<el-divider/>
		<el-main>
			<el-row>
				<el-table :data="[info]">
					<el-table-column prop="company_order_sn" label="订单编号"/>
					<el-table-column prop="created_at" label="订单创建时间"/>
					<el-table-column prop="purchase_qty" label="采购数量"/>
					<el-table-column prop="used_qty" label="已使用"/>
					<el-table-column prop="balance_qty" label="剩余"/>
					<el-table-column prop="valid_time" label="有效期"/>
					<el-table-column prop="created_by" label="创建者"/>
					<el-table-column prop="remark" label="备注"/>
				</el-table>
			</el-row>
		</el-main>
		<h2>下单企业信息</h2>
		<el-divider/>
		<el-main>
			<el-row>
				<el-table :data="[info]">
					<el-table-column prop="company_name" label="下单企业"/>
					<el-table-column prop="contact_mobile" label="联系电话"/>
				</el-table>
			</el-row>
		</el-main>
		<h2>支付信息</h2>
		<el-divider/>
		<el-main>
			<el-row>
				<el-table :data="[info]">
					<el-table-column prop="pay_sn" label="支付ID"/>
					<el-table-column prop="pay_at" label="支付时间"/>
					<el-table-column prop="pay_type" label="支付方式"/>
					<el-table-column prop="pay_amount" label="支付金额"/>
					<el-table-column prop="pay_status_name" label="支付状态"/>
					<el-table-column prop="pay_by" label="操作用户"/>
				</el-table>
			</el-row>
		</el-main>
	</el-card>
	<el-card shadow="hover" v-loading="isLoading">
		<h2>商品信息</h2>
		<el-divider/>
		<el-main>
			<el-row>
				<el-table :data="info.card_product_list" style="width: 100%">
					<el-table-column prop="product_id" label="商品ID"/>
					<el-table-column prop="sale_info" label="商品图片">
						<template #default="scope">
							<el-image :src="scope.row.product_pic_url" style="width:60px;height: 60px;"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="product_name" label="商品名称"/>
					<el-table-column prop="purchase_qty" label="数量"/>
				</el-table>
			</el-row>
		</el-main>
	</el-card>
</template>

<script>
export default {
	name: 'companyOrderDetail',
	components: {},
	data() {
		return {
			action: null,
			isLoading: false,
			company_order_sn: null,
			info: [],
			order_product: [],
		}
	},
	created() {

	},
	mounted() {
		this.company_order_sn = this.$route.query.company_order_sn;
		console.log('company_order_sn' + this.company_order_sn);
		if (this.company_order_sn) {
			this.loadForm()
		}
	},
	methods: {
		//表单数据加载
		loadForm() {
			this.isLoading = true;
			let params = {
				company_order_sn: this.company_order_sn,
			}
			this.$API['company.company_order'].info.post(params).then((res) => {
				if (res.code == 0) {
					this.info = res.data;
					this.order_product = res.data.order_product;
					console.log(res.data)
				}
			}).catch((msg) => {
				this.$alert(msg, "提示", {type: 'error'})
			})
			this.isLoading = false;
		},
		goBack() {
			this.$store.dispatch('closeViewTags', this.$route);
			this.$router.go(-1);
		}
	}
}
</script>

<style>
.avatar {
	width: 148px;
	height: 148px;
	display: block;
}

.el-form-item--default .el-form-item__label {
	text-align: left;
}

.el-form-item--default .el-form-item__label {
	justify-content: start;
}

.el-card {
	margin: 10px;
}
</style>
